<template>
  <div class="container" style="display: block">
    <div class="body" style="display: flex;justify-content:center;margin-bottom: 20px" >
      <div style="display: flex;flex-direction: row;margin-top: 50px;border-bottom:1px solid black;width: 1000px">
       <div style="display: flex;margin-bottom: 10px;">
         <nav class="line-navbar-menu">
           <el-button class="nav-menu-item " @click="changeUserMode(0)" style="border-top-left-radius: 6px;border-bottom-left-radius: 6px">
             我发起的
           </el-button>
           <el-button class="nav-menu-item" @click="changeUserMode(1)" style="border-top-right-radius: 6px;border-bottom-right-radius: 6px">
             待审核的
           </el-button>
         </nav>
         <div class="sub-searchBox">
           <div style="margin-left: 26px">
             <el-input class="searchBar" v-model="search" placeholder="搜索Pull Request" :prefix-icon="Search">
               <template #append>
                 <el-button @click="localSearch"  :icon="Search" />
               </template>
             </el-input>
           </div>
         </div>
       </div>
      </div>
    </div>
    <div class="box-wrapper" style="display: flex;justify-content:center">
      <div class="box-body" style="display: block;width: 1000px">
        <div class="header" style="border-bottom:1px solid black;height:50px;">
          <div class="header-wrapper" style="display: flex;margin-top: 20px;">
            <div class="header-option"
                 style="display: flex;width: 200px; margin-left:15px">
              <div>
                <el-button @click="changeStatusMode(0)">
                  <div style="margin-right: 5px">
                    <el-icon :size="20">
                      <ChatRound/>
                    </el-icon>
                  </div>
                  全部
                </el-button>
              </div>
              <div>
                <el-button @click="changeStatusMode(1)">
                  <div style="margin-right: 5px">
                    <el-icon :size="20">
                      <List/>
                    </el-icon>
                  </div>
                  开启
                </el-button>
              </div>
              <div>
                <el-button @click="changeStatusMode(2)">
                  <div style="margin-right: 5px">
                    <el-icon :size="20">
                      <Select/>
                    </el-icon>
                  </div>
                  关闭
                </el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="pull-menu" style="display: block">
          <div class="pull-menu-notempty" v-if="total>0">
            <el-scrollbar max-height="410px">
              <div v-for="item in tableData"  class="pull-menu-view-item">
                <div  style="display: block;padding: 10px">
                  <div class="header" style="display: flex">
                    <div class="status">
                      <div v-if="item.prStatus==='1'" style="color: green">
                        <el-icon>
                          <ChatRound/>
                        </el-icon>
                      </div>
                      <div v-else-if="item.prStatus==='3'" style="color: rebeccapurple">
                        <el-icon>
                          <CloseBold/>
                        </el-icon>
                      </div>
                      <div v-else-if="item.prStatus==='2'" style="color: red">
                        <el-icon>
                          <Select/>
                        </el-icon>
                      </div>
                    </div>
                    <div style="font-size: 20px;color: black" >
                      {{item.prTitle}}
                    </div>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <div class="pull-menu-view-empty" v-else>
            <div style="height: 410px;display: flex;align-items: center;justify-content: space-evenly">
              <div style="display: block">
                <div style="display: flex;justify-content: space-evenly;margin-top:10px">
                  <el-icon>
                    <Loading/>
                  </el-icon>
                </div>
                <div style="display: flex;justify-content: space-evenly">
                  <p>
                    没有符合要求的PR
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

import request from "@/utils/request";

function test(){
  console.log("!");
}

import {List,Search,Loading,CloseBold,ChatRound,Select} from '@element-plus/icons-vue';
export default {
  setup() {
    return {
      Search,
    }
  },
  data(){
    return{
      userId:'',
      currentStatusMode:0,
      currentUserMode:0,
      tableData:[
      ],
      total:'',
      search:''
    }
  },
  created(){
    this.load()
  },
  name: "PullView",
  components: {
    Select,
    List,
    Loading,
    CloseBold,
    ChatRound,
  },
  methods:{
    toPulls(prId,repoName,repoOwnerName){
      this.$router.push({
        path:"/"+repoOwnerName+"/"+repoName+"/pulls/"+prId
      });
    },
    load(){
      this.userId=sessionStorage.getItem("userId")
      request.get("/user/pulls", {
        params:{
          userIds: this.userId,
          userModes: this.currentUserMode,
          statusModes:this.currentStatusMode,
        }
      }).then(res => {
        console.log(res)
        this.tableData=res.data
        this.total=this.tableData.length
      })
    },
    localSearch(){
      request.get("/user/pulls", {
            params:{
              userIds: this.userId,
              pullName:this.search
            }
          }
      ).then(res => {
        console.log(res)
        this.tableData=res.data.records
        this.total=res.data.total
      })
    },
    changeStatusMode(mode){
      this.currentStatusMode=mode
      console.log(this.currentStatusMode)
      this.load()
    },
    changeUserMode(mode){
      this.currentUserMode=mode
      console.log(this.currentUserMode)
      this.load()
    },
  }
}
</script>

<style scoped>

.pull-menu-view-item:hover{
  background: rgba(0,159,255,0.20);
}

.link-item-repoLink{
  transition:.5s;
  text-decoration: none;
  color: grey;
}

.link-item-pullLink{
  transition:.5s;
  text-decoration: none;
  color: black;
}

a:hover{
  color:#009fff;
}

.line-navbar-menu{
  position: relative;
  display: flex;
  box-sizing: border-box;
  margin-right: 60px;
  margin-top: 4px;
}

.scrollbar-pulls{
  padding: 16px;
}

.nav-menu-item{
  position: relative;
  padding: 5px 16px;
  font-size: 14px;
  font-weight: 500;
  transition:.5s;
  text-decoration: none;
  color:#000000
}
.sub-searchBox{
  position: relative;
  margin-left: 150px;
  width: 600px;
}

.box-body{
  border: 1px solid #30363d;
  border-radius: 6px;
  width: 1000px;
  align-self: center;
}
</style>
